<template>
	<view class="navbar" v-show="show">
		<popup mode="bottom" :round="10" :closeOnClickOverlay="closeOnClickOverlay" :show="show"
			@close="close">
			<view class="comment-pop">
				<view class="comment-pop__head">
					<view class="comment-pop__head--left">{{title}}</view>
					<view class="comment-pop__head--right">
						<image src="@/static/theme/default/home/comment/fangda.png" mode=""
							v-if="contentHeight == 100" @click="scaleUp"></image>
						<image src="@/static/theme/default/home/cancel.png" mode="" v-else @click="close"></image>
					</view>
				</view>
				<view class="comment-pop__content" :style="{height: contentHeight + 'px'}">
					<view
						class="comment-pop__content--input" 
						ref="custom"
						:class="{'show-placeholder' : showPlaceholder}" 
						:placeholder="placeholder"
						contenteditable="true" 
						spellcheck="false"
						:id="id"
						:atUsers="atUsers"
						:atFactory="atFactory"
						:static_img="static_img"
						:currentColor="currentColor"
						:keyboardVisible="keyboardVisible"
						:emoji="emoji"
						:jxp="emoji_jxp"
						:images="images"
						:visible="visible"
						:contentHeight="contentHeight"
						:link="link"
						:change:id="custom.idChange"
						:change:atUsers="custom.atUsersChange"
						:change:atFactory="custom.atFactoryChange"
						:change:static_img="custom.static_imgChange"
						:change:contentHeight="custom.contentHeightChange"
						:change:currentColor="custom.colorChange"
						:change:keyboardVisible="custom.custom_keyboardVisible"
						:change:emoji="custom.custom_emoji"
						:change:jxp="custom.custom_jxp" 
						:change:images="custom.imagesChange"
						:change:visible="custom.visibleChange"
						:change:link="custom.linkChange"
						@keydown="custom.custom_keydown"
						@input="custom.custom_input"
						@blur="custom.custom_blur"
						@click="custom.custom_click">
					</view>
				</view>
				<view class="comment-pop__operate">
					<view class="comment-pop__operate--left">
						<view class="comment-pop__operate--left-item" @click="emojiClick" v-show="compMenu(0)">
							<image src="@/static/theme/default/home/comment/biaoqing.png" mode=""
								v-show="emoji_active == -1"></image>
							<image src="@/static/theme/default/home/comment/jianpan.png" mode=""
								v-show="emoji_active != -1"></image>
						</view>
						<view class="comment-pop__operate--left-item" @click="imgClick" v-show="compMenu(1)">
							<image src="@/static/theme/default/home/comment/xiangce.png" mode=""></image>
						</view>
						<tooltip text="@" :buttons="['@ 个人','@ 全体']" overlay @click="selectAt">
							<view class="comment-pop__operate--left-item" id="at" v-show="compMenu(2)">
								<image src="@/static/theme/default/home/comment/at.png" mode=""></image>
							</view>
						</tooltip>
						<view class="comment-pop__operate--left-item" @click="fontClick" v-show="compMenu(3)">
							<image src="@/static/theme/default/home/comment/zitiyanse.png" mode=""
								v-show="!showFont"></image>
							<image src="@/static/theme/default/home/comment/zitiyanse_active.png" mode=""
								v-show="showFont"></image>
						</view>
						<view class="comment-pop__operate--left-item" @click="moreClick" v-show="compMenu(4)">
							<image src="@/static/theme/default/community/comment-more.png" mode="" v-show="!showMore"></image>
							<image src="@/static/theme/default/community/more-sel.png" mode=""  v-show="showMore"></image>
						</view>
					</view>
					<view class="comment-pop__operate--right" @click="custom.custom_submit">
						<u-button text="发布" color="#2979ff" :customStyle="{height: '60rpx',borderRadius: '15rpx'}"
							:disabled="value.length == 0 || value == '<br>'"></u-button>
					</view>
				</view>
				
				<view class="emoji__head" v-show="emoji_active != -1">
					<view class="emoji__head--item" :class="emoji_active == 0 ? 'emoji-active' : ''"
						@click="emoji_active = 0">
						<image src="@/static/theme/default/home/comment/biaoqing.png" mode=""></image>
					</view>
					<view class="emoji__head--item" :class="emoji_active == 1 ? 'emoji-active' : ''"
						@click="emoji_active = 1">
						<image src="@/static/theme/default/home/comment/like.png" mode=""></image>
					</view>
				</view>
				<swiper class="emoji-swiper" indicator-dots="true" duration="150" v-show="emoji_active == 0">
					<swiper-item v-for="(page, pid) in emojiList" :key="pid">
						<view hover-class="clickable" v-for="(em, eid) in page" :key="eid" @click="addEmoji(em)">
							<image :src="'/static/img/emoji/' + em.url" :lazy-load="true" />
						</view>
					</swiper-item>
				</swiper>
				<swiper class="jxp-swiper" indicator-dots="true" duration="150" v-show="emoji_active == 1">
					<swiper-item v-for="(item,index) in jxpList" :key="index">
						<view class="jxp-swiper__item" v-for="v in item" :key="v.url" @click="addJxp(v)">
							<image :src="'/static/img/jxp/png/' + v.url + '.png'" :lazy-load="true" />
							<text>{{v.text}}</text>
						</view>
						<view class="jxp-swiper__item" v-for="n in (10 - (jxpList.length) % 10)" :key="n"></view>
					</swiper-item>
				</swiper>
				
				<view class="font" v-show="showFont">
					<view class="font__title">文字颜色</view>
					<view class="font__list">
						<view class="font__list--item" v-for="item in colors" :key="item"
							:style="{backgroundColor: item,borderColor: currentColor == item ? item : ''}"
							@click="currentColor = item">
						</view>
					</view>
				</view>
				
				<view class="more" v-show="showMore">
					<view class="more-list" @click="morePopVisible = true">
						<view class="more-list__icon">
							<image src="@/static/theme/default/community/lianjie.png" mode=""></image>
						</view>
						<view class="more-list__text">链接</view>
					</view>
				</view>
				
				<u-popup :show="morePopVisible" @close="morePopVisible = false" @open="morePopVisible = true">
					<view class="more-pop">
						<view class="more-pop__head">
							<u-icon name="close" size="25" @click="morePopVisible = false"></u-icon>
							<view class="more-pop__head--center">添加链接</view>
							<view class="more-pop__head--right" @click="confirmUrl">确定</view>
						</view>
						<view class="more-pop__body">
							<view class="more-pop__body--input">
								<u--input
								    placeholder="请输入链接文本"
								    border="surround"
								    v-model="urlText"
									clearable
								  ></u--input>
							</view>
							<view class="more-pop__body--input" style="margin-top: 20rpx;">
								<u--input
								    placeholder="请输入链接URL"
								    border="surround"
								    v-model="urlSrc"
									clearable
								  ></u--input>
							</view>
						</view>
					</view>
				</u-popup>
			</view>
		</popup>
	</view>
</template>

<script>
	import _data from '@/common/_data.js';
	import emoj_data from '@/static/js/message/emoji_data.js';
	import jxp from '@/static/js/jxp.js';
	import { uploadImages,is_iOS,getDomInfo,getRandom } from '@/common/custom_util.js';
	import Popup from '@/components/custom/uview/u-popup/u-popup.vue'
	import Tooltip from '@/components/custom/uview/u-tooltip/u-tooltip.vue'

	export default {
		components: {
			Popup,Tooltip
		},
		data() {
			return {
				static_img: _data.data('static_img'),
				visible: false,
				value: '',
				placeholder: '我有话要说...',
				colors: ['#1E1E1E', '#AAE04E', '#69DFBC', '#F6E45C', '#F5C348', '#E56B53', '#DF69A5'],
				currentColor: '',
				closeOnClickOverlay: true,
				contentHeight: 100,
				emoji: {},
				emoji_jxp: {},
				emojiList: emoj_data.emoji_list,
				jxpList: jxp.jxp_data,
				showFont: false,
				showMore: false,
				emoji_active: -1,
				images: [],//返回的图片
				keyboardVisible: true,
				id: '',
				listener: null,
				maxHeight: 0,
				atUsers: [],
				atFactory: [],
				morePopVisible: false,
				urlText: '',//链接文本
				urlSrc: '',//链接地址
				link: {},
			}
		},
		props: {
			show: {
				type: Boolean,
				default: false
			}, 
			title: {
				type: String,
				default: '标题'
			},
			//菜单栏，0：表情，1：图片，2：艾特用户，3：艾特部门，4：字体
			menu: {
				type: Array,
				default: () => [0]
			},
			type: {
				type: [String,Number],
				default: 'comment'
			}
		},
		created() {
			this.id = getRandom();
		},
		watch: {
			show() {
				let that = this;
				uni.$on('select-list-'+this.id,res => {
					this.$nextTick(() => {
						this.atUsers = res;
					})
					_data.localData('select-list-'+this.id,[]);
					setTimeout(() => {
						this.atUsers = [];
					},300)
				})
				uni.$on('select-factory-'+this.id,res => {
					this.$nextTick(() => {
						this.atFactory = res;
					})
					setTimeout(() => {
						this.atFactory = [];
					},300)
				})
				this.$nextTick(function(){
					this.visible = this.show;
				})
				// #ifdef APP-PLUS
				if(this.show) {
					this.listener = function(res) {
					  let keyBoardHeight = res.height;
					  if(keyBoardHeight > 0 && that.maxHeight == 0) {
						  uni.getSystemInfo({
							success: function (result) {
								let windowHeight = result.windowHeight;
								that.maxHeight = windowHeight - keyBoardHeight - 100;
							}
						  });
					  }
					}
					uni.onKeyboardHeightChange(this.listener)
				} else {
					uni.$off('select-list-'+this.id)
					uni.$off('select-factory-'+this.id)
					if(this.listener) uni.onKeyboardHeightChange(this.listener)
					_data.localData('select-list-'+this.id,[]);
				}
				// #endif
			},
		},
		computed: {
			showPlaceholder() {
				return (this.value.length == 0 || this.value == '<br>') && this.placeholder
			},
		},
		methods: {
			init() {
				this.closeOnClickOverlay = true;
				this.contentHeight = 100;
				this.emoji_active = -1;
				this.showFont = false;
			},
			/**
			 * 发布回调
			 * @param {Object} v
			 */
			submit(v) {
				this.value = '';
				let val = v.text.replace(/&nbsp;/g,"");
				val = val.replace(/<div><br><\/div>/g,"");
				val = val.trim();
				if(!val) {
					uni.showToast({
						title: '请输入内容',
						icon: 'none'
					})
					return
				}
				console.log(v);
				this.$emit('submit', {
					value: v,
					type: this.type,
				})
				this.images = [];
				this.close()
			},
			/**
			 * 输入回调
			 * @param {Object} v
			 */
			input(v) {
				this.value = v.text;
				// this.atUsers = v.users;
				// this.atFactory = v.factorys;
				// if(v.users) {
				// 	v.users.forEach(item => {
				// 		item.lock = true;
				// 	})
				// }
				// _data.localData('select-list-'+this.id,v.users);
			},
			/**
			 * 点击回调
			 */
			click() {
				this.emoji_active = -1;
				this.showFont = false; 
				this.keyboardVisible = true;
			},
			unfocus() {
				uni.hideKeyboard();
			},
			/**
			 * 点击放大图标
			 */
			scaleUp() {
				this.emoji_active = -1;
				this.showFont = false;
				this.contentHeight = this.maxHeight;
				// #ifdef H5
				this.contentHeight = 300;
				// #endif
				this.closeOnClickOverlay = false;
			},
			/**
			 * 点击关闭图标
			 */
			close() {
				this.init();
				this.$emit('close',{
					type: this.type,
				})
			},
			/**
			 * 点击表情图标
			 */
			emojiClick() {
				this.emoji_active = this.emoji_active == -1 ? 0 : -1;
				this.showFont = false;
				this.keyboardVisible = this.emoji_active == -1 ? true : false;
			},
			/**
			 * 点击字体图标
			 */
			fontClick() {
				if(!this.currentColor) this.currentColor = '#1E1E1E';
				this.emoji_active = -1
				this.showFont = !this.showFont;
				this.keyboardVisible = this.showFont ? false : true;
			},
			/**
			 * 点击更多图标
			 */
			moreClick() {
				this.emoji_active = -1;
				this.showFont = false;
				this.showMore = !this.showMore;
				this.keyboardVisible = this.showMore ? false : true;
			},
			/**
			 * 添加链接
			 */
			confirmUrl() {
				if(!this.urlSrc) {
					uni.showToast({
						title: 'URL不能为空',
						icon: 'none'
					})
					return
				}
				if(!this.isUrl(this.urlSrc)) {
					uni.showToast({
						title: '请输入正确的网址哦',
						icon: 'none'
					})
					return
				}
				this.link = {
					url: this.urlSrc,
					text: this.urlText
				}
				setTimeout(() => {
					this.link = {
						url: '',
						text: ''
					}
				},300)
				this.morePopVisible = false;
				this.showMore = false;
			},
			isUrl(url) {
			   return /^(http(s)?:\/\/)/.test(url)
			},
			selectAt(i) {
				switch(i) {
					case 1://艾特用户
						uni.navigateTo({
							url: '/pages/wait/add/select?name='+this.id
						})
						break;
					case 2:
						let factory = [];
						uni.navigateTo({
							url: '/pages/home/child/week-report-view/factory?factorys='+JSON.stringify(factory) + '&name=select-factory-' + this.id
						})
						break;
				}
			},
			/**
			 * 点击图片图标
			 */
			imgClick() {
				let sourceType = is_iOS() ? ['album'] : ['album','camera'];
				uploadImages({
					sizeType: 'compressed',
					fileName: 'topic',
					sourceType
				}, res => {
					this.images = res;
				})
			},
			/**
			 * 添加表情
			 */
			addEmoji(v) {
				if(is_iOS()) {
					this.emoji_active = -1;
				}
				this.emoji = v;
				setTimeout(() => {
					this.emoji = '';
				},100)
			},
			/**
			 * 添加金小鹏表情
			 */
			addJxp(v) {
				if(is_iOS()) {
					this.emoji_active = -1;
				}
				this.emoji_jxp = v;
				setTimeout(() => {
					this.emoji_jxp = '';
				},100)
			},
			/**
			 * 筛选菜单
			 * @param {Object} i
			 */
			compMenu(i) {
				let flag = false;
				this.menu.forEach(item => {
					if(item == i) flag = true;
				})
				return flag;
			},
			
		}
	}
</script>

<script module="custom" lang="renderjs">
	import {
		is_iOS,utf16toEntities,imageStrigify
	} from '@/common/custom_util.js';
	import _data from '@/common/_data.js'
	
	function placeCaretAtEnd(jsDom) {//传入光标要去的jsDom节点
		if(!jsDom) return
	    jsDom.focus();
	    if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
	        var range = document.createRange();
	        range.selectNodeContents(jsDom);
	        range.collapse(false);
	        var sel = window.getSelection();
	        sel.removeAllRanges();
	        sel.addRange(range);
	    } else if (typeof document.body.createTextRange != "undefined") {
	        var textRange = document.body.createTextRange();
	        textRange.moveToElementText(jsDom);
	        textRange.collapse(false);
	        textRange.select();
	    }
	}
	
	function replaceNode(node,newNode) {
		if(node.firstChild !== null) {
			var children = node.childNodes;
		    for (var i = 0; i < children.length; i++) {
				if(children[i] == node) {
					node.replaceChild(newNode,children[i])
					continue
				}
				if(children[i].firstChild !== null) {
					replaceNode(children[i],newNode)
				}
		    }
		} else {
			node.parentNode.replaceChild(newNode,node)
		}
	}
	
	//判断是否支持range
	function isSupportRange() {
	  return typeof window.getSelection === 'function'
	}
	
	export default {
		data() {
			return {
				id: '',
				color: '',
				box: null,
				static_img: '',
				lastEditRange: null,//定义最后光标对象
			}
		},
		mounted() {
			this.box = document.getElementById(this.id);
		},
		methods: {
			// 获取光标位置
			saveRange() {
				try {
					if(!isSupportRange()) return
					// 获取选定对象
					var selection = window.getSelection()
					// 设置最后光标对象
					this.lastEditRange = selection.getRangeAt(0)
				} catch(e) {}
			},
			// 设置光标位置
			setRange() {
				try {
					if(!isSupportRange()) return
					if(!this.lastEditRange) this.saveRange();
					// 存在最后光标对象，选定对象清除所有光标并添加最后光标还原之前的状态
					var selection = window.getSelection()
					selection.removeAllRanges()
					selection.addRange(this.lastEditRange)
				} catch(e) {}
			},
			sendMethod(ownerInstance,name,value) {
				if(!this.box) this.box = document.getElementById(this.id)
				if(this.box) {
					if(value && value.text) {
						ownerInstance.callMethod(name, value);
						return
					}
					let text = this.box.innerHTML;
					text = utf16toEntities(text);
					const newObj = Object.assign({text}, value);
					ownerInstance.callMethod(name, newObj);
				}
			},
			idChange(newVal, oldVal) {
				this.id = newVal;
			},
			custom_submit(event, ownerInstance) {
				if(!this.box) return
				let atEles = this.box.getElementsByClassName("comment-at");
				let atFactoryEles = this.box.getElementsByClassName("comment-at-factory");
				let imgEles = this.box.getElementsByClassName("img");
				let box = this.box.cloneNode(true);
				let emojiEles = box.getElementsByClassName("comment-emoji");
				let imgElesCopy = box.getElementsByClassName("img");
				let users = [];
				let factorys = [];
				let images = [];
				let length = emojiEles.length;
				//替换表情为文字
				for (let i = 0; i < length; i++) {
					let item = emojiEles[0];
					let span = document.createElement('i');
					span.innerText = item.dataset.alt;
					replaceNode(item,span);
				}
				//去除src的值并去除data-key的地址
				if(imgElesCopy && imgElesCopy.length) {
					for (let i = 0; i < imgElesCopy.length; i++) {
						imgElesCopy[i].src = '';
						imgElesCopy[i].dataset.key = imageStrigify(imgElesCopy[i].dataset.key);
					}
				}
				
				let html = box.innerHTML.replace(/<i>|<\/i>/g,"");
				html = utf16toEntities(html);
				
				//艾特处理
				if(atEles && atEles.length) {
					for (let i = 0; i < atEles.length; i++) {
						let userStr = atEles[i].dataset.user;
						let user = JSON.parse(userStr);
						let flag = false;
						for (let j = 0; j < users.length; j++) {
							if(users[j].pxid == user.pxid) flag = true;
						}
						if(flag) continue
						users.push(user);
					}
				}
				if(atFactoryEles && atFactoryEles.length) {
					for (let i = 0; i < atFactoryEles.length; i++) {
						let factoryStr = atFactoryEles[i].dataset.factory;
						let factory = JSON.parse(factoryStr);
						let flag = false;
						for (let j = 0; j < factorys.length; j++) {
							if(factorys[j].OBSCODE == factory.OBSCODE) flag = true;
						}
						if(flag) continue
						factorys.push(factory);
					}
				}
				
				//上传图片处理
				if(imgEles && imgEles.length) {
					for (let i = 0; i < imgEles.length; i++) {
						images.push(imgEles[i].src);
					}
				}
				this.sendMethod(ownerInstance,'submit',{text:html,users,images,factorys});
				this.box.innerHTML = '';
			},
			custom_keydown(event, ownerInstance) {
				if(this.color) {
					document.execCommand('foreColor', false, this.color);
				}
			},
			custom_input(event, ownerInstance) {
				let users = [];
				let factorys = [];
				if(this.box) {
					let atHtml = this.box.getElementsByClassName('comment-at');
					let atFactoryHtml = this.box.getElementsByClassName('comment-at-factory');
					for (let i = 0; i < atHtml.length; i++) {
						let userStr = atHtml[i].dataset.user;
						let user = JSON.parse(userStr);
						users.push(user);
					}
					for (let i = 0; i < atFactoryHtml.length; i++) {
						let factoryStr = atFactoryHtml[i].dataset.factory;
						let factory = JSON.parse(factoryStr);
						factorys.push(factory);
					}
				}
				this.sendMethod(ownerInstance,'input',{users,factorys});
			},
			custom_click(event, ownerInstance) {
				ownerInstance.callMethod('click');
				if(this.box) this.box.focus();
			},
			custom_blur() {
				this.saveRange()
			},
			colorChange(newVal, oldVal) {
				this.color = newVal;
			},
			visibleChange(newVal, oldVal) {
				if(newVal) {
					if(this.box) this.box.focus();
					this.saveRange();
				}
			},
			contentHeightChange(newVal, oldVal,ownerInstance) {
				if(newVal != 100) {
					if(this.box) this.box.focus();
				}
			},
			imagesChange(newVal, oldVal,ownerInstance) {
				newVal.forEach(item => {
					let w = '';
					let h = '';
					if(this.box.clientWidth < item.width) {
						w = this.box.clientWidth;
						h = item.height / item.width * this.box.clientWidth;
					} else {
						w = item.width;
						h = item.height;
					}
					let src = item.img;
					let imgHtml = "<img class='img pic' src='"+ src +"' data-key='"+ src +"' width = "+ w +" height = "+ h +">";
					this.setRange();
					document.execCommand('insertHTML', false, imgHtml);
				})
				this.sendMethod(ownerInstance,'input')
			},
			custom_keyboardVisible(newVal, oldVal,ownerInstance) {
				if(newVal) {
					if(this.box) this.box.focus();
				} else {
					if(!is_iOS()) ownerInstance.callMethod('unfocus');
				}
			},
			static_imgChange(newVal, oldVal) {
				this.static_img = newVal;
			},
			custom_emoji(newVal, oldVal,ownerInstance) {
				let emoji = newVal;
				if(Object.keys(emoji).length) {
					let url = '';
					// #ifdef APP-PLUS
					url = plus.io.convertLocalFileSystemURL('_www/static/img/emoji/' + emoji.url);
					// #endif
					// #ifdef H5
					url = '/static/img/emoji/' + emoji.url;
					// #endif
					//ios执行后会弹出键盘，Android不会
					this.setRange();
					document.execCommand('insertHTML', false, '<img class="comment-default pic comment-emoji" src="' + url + '" data-alt="'+ emoji.alt +'" />');
					this.sendMethod(ownerInstance,'input');
				}
			},
			custom_jxp(newVal, oldVal,ownerInstance) {
				let jxp = newVal;
				if(Object.keys(jxp).length) {
					let url = '';
					// #ifdef APP-PLUS
					url = plus.io.convertLocalFileSystemURL('_www/static/img/jxp/gif/' + jxp.url + '.gif');
					// #endif
					// #ifdef H5
					url = '/static/img/jxp/gif/' + jxp.url + '.gif';
					// #endif
					this.setRange();
					document.execCommand('insertHTML', false, '<img class="comment-jxp pic comment-emoji" src="' + url + '" data-alt="'+ jxp.alt +'" width = "100" height = "100" />');
					this.sendMethod(ownerInstance,'input');
				}
			},
			atUsersChange(newVal, oldVal,ownerInstance) {
				let users = [];
				if(newVal) {
					for (let i = 0; i < newVal.length; i++) {
						let flag = false;
						if(oldVal) {
							for (let j = 0; j < oldVal.length; j++) {
								if(newVal[i].pxid == oldVal[j].pxid) flag = true;
							}
						}
						if(!flag) users.push(newVal[i]);
					}
				}
				let html = '';
				users.forEach(item => {
					let name = item.pname;
					let text = '@' + name;
					let user = JSON.stringify({
						pname: item.pname,
						pxid: item.pxid
					});
					if(is_iOS()) {
						html += "<span style='-webkit-user-select: auto;user-select: auto;'><span class='comment-at' data-user='" + user + "' contenteditable='false' style='color: #5797cc;margin-right: 10px;-webkit-user-select: all;user-select: all;'>"+ text +"</span></span>";
					} else {
						html += "<span class='comment-at' data-user='" + user + "' contenteditable='false' style='color: #5797cc;margin-right: 10px;'>"+ text +"</span>";
					}
				})
				this.setRange();
				if(html) document.execCommand('insertHTML', false, html);
			},
			atFactoryChange(newVal, oldVal,ownerInstance) {
				let factorys = [];
				if(newVal) {
					for (let i = 0; i < newVal.length; i++) {
						let flag = false;
						if(oldVal) {
							for (let j = 0; j < oldVal.length; j++) {
								if(newVal[i].OBSCODE == oldVal[j].OBSCODE) flag = true;
							}
						}
						if(!flag) factorys.push(newVal[i]);
					}
				}
				let html = '';
				factorys.forEach(item => {
					let name = item.name;
					let text = '@' + name;
					let factory = JSON.stringify({
						OBSCODE: item.OBSCODE
					});
					if(is_iOS()) {
						html += "<span style='-webkit-user-select: auto;user-select: auto;'><span class='comment-at-factory' data-factory='" + factory + "' contenteditable='false' style='color: #5797cc;margin-right: 10px;-webkit-user-select: all;user-select: all;'>"+ text +"</span></span>";
					} else {
						html += "<span class='comment-at-factory' data-factory='" + factory + "' contenteditable='false' style='color: #5797cc;margin-right: 10px;'>"+ text +"</span>";
					}
				})
				this.setRange();
				if(html) document.execCommand('insertHTML', false, html);
			},
			linkChange(newVal, oldVal,ownerInstance) {
				if(!newVal.url) return
				let text = newVal.text ? newVal.text : newVal.url;
				let html = '';
				if(is_iOS()) {
					html += "<span style='-webkit-user-select: auto;user-select: auto;'><span class='comment-url' data-url='" + newVal.url + "' contenteditable='false' style='color: #4096ff;margin-right: 10px;-webkit-user-select: all;user-select: all;'>"+ text +"</span></span>";
				} else {
					html += "<span class='comment-url' contenteditable='false' style='color: #4096ff;margin-right: 10px;' data-url='"+newVal.url+"'>"+text+"</span>";
				}
				this.setRange();
				if(html) document.execCommand('insertHTML', false, html);
			},
		}
	}
</script>

<style scoped lang="scss">
	.navbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		min-height: 100rpx;
		z-index: 999999;
		overflow: hidden;
	}

	.comment-pop {

		&__head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 50px;
			padding: 0 20rpx;
			box-sizing: border-box;

			&--left {
				font-size: 25rpx;
				color: #595959;
				max-width: 200rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			&--right {
				width: 40rpx;
				height: 40rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		&__content {
			padding: 10rpx 20rpx;
			box-sizing: border-box;

			&--input {
				width: 100%;
				height: 100%;
				font-size: 18px;
				outline: none;
				-webkit-user-select: text;
				position: relative;
				overflow-y: scroll;
			}
		}

		&__operate {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 1rpx solid #eee;
			padding: 0 10px;
			height: 50px;
			
			&--left {
				display: flex;

				&-item {
					width: 25px;
					height: 25px;
					margin: 14px 10px;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			&--right {
				width: 100rpx;
			}
		}
	}

	.emoji__head {
		height: 100rpx;
		display: flex;
		align-items: center;
		background-color: rgba(220, 220, 220, .1);
		padding: 0 20rpx;
		box-sizing: border-box;

		&--item {
			width: 80rpx;
			height: 80rpx;
			margin-right: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx;

			image {
				width: 60%;
				height: 60%;
			}
		}
	}

	.emoji-active {
		background-color: rgba(164, 197, 196, 0.1);
	}

	.emoji-swiper {
		height: 40vw;
		background-color: rgba(220, 220, 220, .2);

		swiper-item {
			display: flex;
			align-content: flex-start;
			flex-wrap: wrap;

			view {
				width: 12vw;
				height: 12vw;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 22px !important; //8.4vw;
					height: 22px !important; //8.4vw;
				}
			}
		}
	}

	.jxp-swiper {
		height: 55vw;
		background-color: rgba(220, 220, 220, .2);

		swiper-item {
			display: flex;
			align-content: flex-start;
			flex-wrap: wrap;
		}
	}
	
	.jxp-swiper__item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 1vw;
		
		image {
			width: 18vw;
			height: 18vw;
		}
		
		text {
			font-size: 25rpx;
			overflow: hidden;
		}
	}

	.font {
		height: 40vw;
		background-color: rgba(220, 220, 220, .2);

		&__title {
			height: 80rpx;
			padding-left: 20rpx;
			font-size: 25rpx;
			color: #aaa;
			line-height: 80rpx;
		}

		&__list {
			display: flex;
			justify-content: space-around;

			&--item {
				width: 40rpx;
				height: 40rpx;
				border-radius: 100%;
				padding: 10rpx;
				background-clip: content-box;
				border-width: 1rpx;
				border-style: solid;
				border-color: transparent;
				text-align: center;
				line-height: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	
	.more {
		height: 300rpx;
		display: flex;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #eee;
		
		&-list {
			display: flex;
			flex-direction: column;
			align-items: center;
			
			&__icon {
				width: 100rpx;
				height: 100rpx;
				border-radius: 10rpx;
				background-color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				
				image {
					width: 50%;
					height: 50%;
				}
			}
			
			&__text {
				font-size: 30rpx;
				color: #aaa;
				margin-top: 10rpx;
			}
		}
	}
	
	.more-pop {
		
		&__head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			
			&--center {
				font-size: 30rpx;
			}
			
			&--right {
				font-size: 30rpx;
				color: #1890ff;
			}
		}
		
		&__body {
			padding: 40rpx;
			
			&--input {
				background-color: #eee;
			}
		}
	}

	.show-placeholder::before {
		content: attr(placeholder);
		position: absolute;
		top: 0;
		left: 2px;
		color: #aaa;
		pointer-events: none;
		font-size: 18px;
	}
	
	.comment-pop__content--input /deep/ #img {
		max-width: 100%;
	}
	
	.comment-pop__content--input::-webkit-scrollbar {/*滚动条整体样式*/
		display: block !important;
	    width: 3px !important;     /*高宽分别对应横竖滚动条的尺寸*/
	    height: 0.5px !important;
	}
	
	.comment-pop__content--input::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
	    border-radius: 10px;
	    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
	    background: #aaa;
	}
	
	.comment-pop__content--input::-webkit-scrollbar-track {/*滚动条里面轨道*/
	    border-radius: 10px;
	    background: #fff;
	}
</style>
